/*
 * @Author: 陈明烽
 * @FilePath: /evdata/src/PageViewPro/PageViewPro.tsx
 * @Description: 描述
 */
import * as React from 'react';
import { useMemo } from 'react';
import { Breadcrumb } from 'antd';
import { Link } from 'react-router-dom';
import classnames from 'classnames';
import { CPageView, CPageViewCrumb } from './indexStyle';
export interface LinkRrouter {
  name: string;
  address?: string;
}

export interface PageViewProps {
  /** 面包屑数组  */
  linkRrouters?: LinkRrouter[];
  /** 顶部padding */
  paddingTop?: number;
  /** 底部padding */
  paddingBottom?: number;
  /** 是否显示面包屑 */
  isShowCrumb?: boolean;
}

const PageView: React.FC<PageViewProps> = props => {
  const {
    linkRrouters,
    children,
    paddingTop,
    paddingBottom,
    isShowCrumb,
  } = props;
  // const styles = {
  //   paddingTop: paddingTop + 'px',
  //   paddingBottom: paddingBottom + 'px',
  // };
  const styles = useMemo(() => {
    return {
      paddingTop: paddingTop + 'px',
      paddingBottom: paddingBottom + 'px',
    };
  }, [paddingTop, paddingBottom]);
  const crumbClassName = classnames('c-page-view-crumb');
  return (
    <>
      <CPageView style={styles}>
        {isShowCrumb && (
          <CPageViewCrumb>
            <Breadcrumb>

              {linkRrouters && linkRrouters.length > 0
                ? [
                    linkRrouters.map((v, i) => {
                      return (
                        <Breadcrumb.Item key={i}>
                          {/* {v.address?(<Link to={v.address}>{v.name}</Link>) } */}
                          {v.address ? (
                            <Link to={v.address}>{v.name}</Link>
                          ) : (
                            <span>{v.name}</span>
                          )}
                        </Breadcrumb.Item>
                      );
                    }),
                  ]
                : null}
            </Breadcrumb>
          </CPageViewCrumb>
        )}

        {children}
      </CPageView>
    </>
  );
};
PageView.defaultProps = {
  linkRrouters: [],
  paddingTop: 20,
  paddingBottom: 20,
  isShowCrumb: true,
};

// export { CPageViewContent, CPageViewFooter, CPageViewTop, CPageViewSpin };

export default PageView;
